<template>
  <border-box title="原始素材库">
    <span slot="titleRight" @click="showContentModel">更多</span>
    <div class="item" v-for="(item,index) in contentList" :key="index">
      <img class="item-img" :src="item.mbLogoUrl||item.pcLogoUrl||defaultImgUrl">
      <div style="flex:1">
        <div class="item-title">{{item.contentTitle}}</div>
        <div class="item-icons">
          <a-icon @click="showPreview(item)" title="预览" type="eye" theme="twoTone"/>
          <a-icon @click="insert(item)" title="应用" type="check-circle" theme="twoTone"/>
        </div>
      </div>
    </div>
    <preview ref="preview"></preview>
    <content-model ref="contentModel" @modelOk = "contentChange"></content-model>
  </border-box>
</template>

<script>
  //内容编辑
  import BorderBox from "../BorderBox";
  import Preview from "../preview/Preview";
  import ContentModel from '../../../views/task/model/ContentModel'
  import { postAction } from '../../../api/manage'

  export default {
    name: "ContentEditSeu",
    components: { ContentModel, BorderBox, Preview},
    props: ['params'],
    data() {
      return {
        defaultImgUrl: require('@/assets/default.png'),
        contentList: [],
        url: {
          list: 'task/taskInfo/conContentBankList'
        },
      }
    },
    created() {
      this.loadFirstTwoData();
    },
    methods: {
      //请求前两条数据
      loadFirstTwoData() {
        postAction(this.url.list, {
          pageNo: 1,
          pageSize: 2,
          state:1
        }).then(res => {
          if (res.success) {
            this.contentList = res.result.records;
          }
        })
      },
      showPreview(item) {
        this.$refs.preview.show(item);
      },
      showContentModel(){
        this.$refs.contentModel.show();
      },
      handleOk() {
        if (this.selectionRows && this.selectionRows.length > 0) {
          const content = this.selectionRows[0].content;
          this.insert(content);
        }
        this.visible = false;
      },
      contentChange({content}){
        this.insert(content);
        this.visible = false;
      },
      insert(item) {
        this.$emit('insert', item.content);
        postAction('task/taskInfo/refContentBank',{bankId:item.id,taskNo:this.params.taskNo});
      }
    }
  }
</script>

<style scoped lang="less">
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, .65);
    padding: 5px;
    border-radius: 8px;
    background-color: #f3f5f9;

    &-img {
      width: 150px;
      height: 90px;
      margin-right: 10px;
      border-radius: 8px;
    }

    &-title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      margin-bottom: 5px;
    }

    &-icons {
      text-align: right;
    }

    &-icons i {
      cursor: pointer;
      margin-right: 10px;
      font-size: 18px;
    }
  }
</style>
